<!DOCTYPE html>
<html lang="zh">
<head>
    <!-- 设置字符编码为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 适配不同设备的屏幕尺寸 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>角色管理</title>
    <!-- 引入通用样式文件 -->
    <link rel="stylesheet" href="/static/style.css">
    <!-- 引入用户管理页面的专属样式文件 -->
    <link rel="stylesheet" href="/static/user_management.css">
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <!-- 侧边栏标题 -->
            <div class="sidebar-title">
                智能工业手势识别
            </div>
            <!-- 用户信息展示区域，包含用户名和退出登录链接 -->
            <div class="user-info">
                <span class="username">{{ current_user.username }}</span>
                <a href="{{ url_for('auth.logout_route') }}" class="logout">退出登录</a>
            </div>
        </div>
        <!-- 侧边栏导航菜单 -->
        <ul class="nav-menu">
            <!-- 根据用户角色显示不同的导航项 -->
            {% if current_user.role != 'admin' %}
                <li class="nav-item" onclick="window.location.href='{{ url_for('gesture.recognition') }}'">实时识别</li>
                <li class="nav-item" onclick="window.location.href='{{ url_for('gesture.gesture_config') }}'">手势配置</li>
                <li class="nav-item" onclick="window.location.href='{{ url_for('gesture.history') }}'">历史记录</li>
            {% else %}
                <li class="nav-item active">角色管理</li>
                <li class="nav-item" onclick="window.location.href='{{ url_for('user.user_records') }}'">识别记录</li>
            {% endif %}
        </ul>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="main-container">
            <!-- 用户管理页面的头部，包含标题和添加用户按钮 -->
            <div class="user-management-header">
                <h1>用户管理</h1>
                <button class="add-user-btn" onclick="showModal()">
                    <i class="fas fa-plus"></i>
                    添加用户
                </button>
            </div>

            <!-- 用户列表展示区域 -->
            <div class="user-list">
                <!-- 用户列表的表头 -->
                <div class="user-list-header">
                    <div class="header-item">用户名</div>
                    <div class="header-item">角色</div>
                    <div class="header-item">操作</div>
                </div>
                <!-- 循环展示所有用户信息 -->
                {% for user in users %}
                    <div class="user-item">
                        <div class="user-info">
                            <span class="username">{{ user.username }}</span>
                        </div>
                        <div class="user-role">
                            <span class="role-badge {{ user.role }}">{{ user.role }}</span>
                        </div>
                        <div class="user-actions">
                            <!-- 禁止删除当前登录用户 -->
                            {% if user.id != current_user.id %}
                                <button class="delete-btn" onclick="deleteUser({{ user.id }})">
                                    <i class="fas fa-trash"></i>
                                    删除
                                </button>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- 添加用户模态框 -->
    <div class="modal" id="addUserModal">
        <div class="modal-content" style="min-width: 800px">
            <!-- 模态框头部，包含标题和关闭按钮 -->
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fas fa-user-plus"></i>
                    添加新用户
                </div>
                <button class="close-btn" onclick="closeModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <!-- 模态框主体，包含添加用户的表单 -->
            <div class="modal-body">
                <form id="addUserForm" onsubmit="return addUser(event)">
                    <div class="form-group">
                        <label for="username">
                            <i class="fas fa-user"></i>
                            用户名
                        </label>
                        <input type="text" id="username" class="form-control" placeholder="请输入用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="password">
                            <i class="fas fa-lock"></i>
                            密码
                        </label>
                        <input type="password" id="password" class="form-control" placeholder="请输入密码" required>
                    </div>
                    <div class="form-group">
                        <label for="role">
                            <i class="fas fa-user-tag"></i>
                            角色
                        </label>
                        <select id="role" class="form-control" required>
                            <option value="">请选择角色</option>
                            <option value="user">普通用户</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                    <!-- 模态框底部，包含取消和确认添加按钮 -->
                    <div class="modal-footer">
                        <button type="button" class="cancel-btn" onclick="closeModal()">
                            <i class="fas fa-times"></i>
                            取消
                        </button>
                        <button type="submit" class="confirm-btn">
                            <i class="fas fa-check"></i>
                            确认添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 显示添加用户模态框
        function showModal() {
            const modal = document.getElementById('addUserModal');
            modal.classList.add('show');
            // 禁用页面滚动
            document.body.style.overflow = 'hidden';
        }

        // 关闭添加用户模态框
        function closeModal() {
            const modal = document.getElementById('addUserModal');
            modal.classList.remove('show');
            // 恢复页面滚动
            document.body.style.overflow = '';
        }

        // 点击模态框外部关闭模态框
        document.getElementById('addUserModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // 添加用户的函数
        function addUser(event) {
            event.preventDefault();

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const role = document.getElementById('role').value;

            fetch('{{ url_for('user.add_user_route') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    password: password,
                    role: role
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('添加用户成功');
                    closeModal();
                    // 刷新页面
                    location.reload();
                } else {
                    alert('添加用户失败：' + data.error);
                }
            })
            .catch(error => {
                alert('添加用户失败：' + error);
            });

            return false;
        }

        // 删除用户的函数
        function deleteUser(userId) {
            if (!confirm('确定要删除该用户吗？')) {
                return;
            }

            fetch(`{{ url_for('user.delete_user_route', user_id=0) }}`.replace('0', userId), {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('删除用户成功');
                    // 刷新页面
                    location.reload();
                } else {
                    alert('删除用户失败：' + data.error);
                }
            })
            .catch(error => {
                alert('删除用户失败：' + error);
            });
        }
    </script>
</body>
</html>